<template>
  <div class="home">
    <top class="wow fadeInDown" title="智慧运维视频监控智能分析系统"></top>
    <div class="homeMain">
      <item>
        <div class="pageInner">
          <breadcrumb>
            <el-breadcrumb-item to="/camera/list">摄像头列表</el-breadcrumb-item>
            <el-breadcrumb-item>摄像头设置</el-breadcrumb-item>
          </breadcrumb>
          <div class="pageInnerData">
            <div class="pageInnerDataL wow fadeInLeft">
              <div class="searchInput searchTop2">
                <el-input v-model="keyword" placeholder="请输入内容" clearable></el-input>
              </div>
              <div class="treeBody scrollBar">
                <el-tree :data="computedTreeData" :props="defaultProps"/>
              </div>
            </div>
            <transition name="fade" mode="out-in">
              <div v-if="show" class="pageInnerDataC" :class="'pageInnerDataC'+active">
                <div class="centerImg" :class="'centerImg'+active"
                     v-for="(imgSrc, index) in imagesToShow" :key="index">
                  <img :src="imgSrc" alt="">
                </div>
              </div>
            </transition>
            <div class="pageInnerDataR wow fadeInRight">
              <tab :list="tabList" v-model:active="active"></tab>
              <div class="navigations">
                <div class="navigation">
                  <div class="navigationitem wow fadeInDown" data-wow-delay="0.5s"><img class="jt"
                                                                                        src="./assets/newicon_shangjiantou.png"
                                                                                        alt=""></div>
                </div>
                <div class="navigation">
                  <div class="navigationitem wow fadeInLeft" data-wow-delay="0.5s"><img class="jt xz270"
                                                                                        src="./assets/newicon_shangjiantou.png"
                                                                                        alt="">
                  </div>
                  <div class="navigationitem wow fadeInUp" data-wow-delay="0.5s"><img class="sh"
                                                                                      src="./assets/newicon_shuohua.png"
                                                                                      alt=""></div>
                  <div class="navigationitem wow fadeInRight" data-wow-delay="0.5s"><img class="jt xz90"
                                                                                         src="./assets/newicon_shangjiantou.png"
                                                                                         alt=""></div>
                </div>
                <div class="navigation">
                  <div class="navigationitem wow fadeInUp" data-wow-delay="0.5s"><img class="jt xz180"
                                                                                      src="./assets/newicon_shangjiantou.png"
                                                                                      alt="">
                  </div>
                </div>
              </div>
              <div class="camera">
                <div class="shexiangtoulist3 mt20 wow fadeInDown" data-wow-delay="0.5s">
                  <div class="item">
                    <img src="./assets/icon_manage_fd.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_sx.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_jia.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_jian.png" alt=""/>
                  </div>
                </div>
                <div class="shexiangtoulist3 mt10 wow fadeInDown" data-wow-delay="0.5s">
                  <div class="item">
                    <img src="./assets/icon_manage_ybp.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_ybp2.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_qizi.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_close1.png" alt=""/>
                  </div>
                </div>
                <div class="shexiangtoulist4 mt20 wow fadeInDown" data-wow-delay="0.5s">
                  <div class="item">
                    <img src="./assets/icon_manage_shexiangtouleft.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_jingbao.png" alt=""/>
                  </div>
                  <div class="item">
                    <img src="./assets/icon_manage_shexiangtouright.png" alt=""/>
                  </div>
                </div>
              </div>
              <div class="anniu">
                <div class="anniuitem cur wow fadeInLeft" data-wow-delay="0.5s" @click="handleClick('electronicFence')">电子围栏
                </div>
                <div class="anniuitem cur wow fadeInRight" data-wow-delay="0.5s" @click="handleClick('inspectionPath')">巡检路径
                </div>
                <div class="anniuitem cur wow fadeInLeft" data-wow-delay="0.5s" @click="handleClick('deploymentTime')">布防时间
                </div>
                <div class="anniuitem cur wow fadeInRight" data-wow-delay="0.5s" @click="handleClick('workModeSetting')">工作模式
                </div>
              </div>
            </div>
          </div>
        </div>
      </item>
    </div>
    <videoBg></videoBg>
    <pop ref="electronicFence" title="电子围栏">
      <!--    电子围栏-->
      <electronicFence @saveData="closePop('electronicFence')"></electronicFence>
    </pop>
    <pop ref="inspectionPath" title="巡检路径">
      <InspectionPath @saveData="closePop('inspectionPath')"></InspectionPath>
    </pop>
    <pop ref="deploymentTime" title="布防时间">
      <deploymentTime @saveData="closePop('deploymentTime')"></deploymentTime>
    </pop>
    <pop ref="workModeSetting" title="工作模式设置">
      <workModeSetting @saveData="closePop('workModeSetting')"></workModeSetting>
    </pop>
  </div>
</template>

<script>
import top from "../../../components/top/index.vue";
import videoBg from "@/components/videoBg/index.vue";
import item from "@/components/item2/index.vue";
import WOW from "wow.js";
import breadcrumb from "../../../components/breadcrumb/index.vue";
import {generateTreeData} from "../../../api/api/LargeScreenData.js";
import tab from './components/tab/tab.vue'
import img from './assets/img.png'
import pop from '@/components/pop/pop.vue'
import electronicFence from './components/electronicFence/index.vue'
import deploymentTime from './components/deploymentTime/index.vue'
import workModeSetting from './components/workModeSetting/index.vue'
import InspectionPath from './components/InspectionPath/index.vue'

export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [],
      show: true,
      keyword: '',
      filteredTreeData: [],
      active: 1,
      tabList: [{
        name: '单屏',
        id: 1
      }, {
        name: '四分屏',
        id: 2
      }, {
        name: '九分屏',
        id: 3
      }, {
        name: '十六分屏',
        id: 4
      }]
    }
  },
  components: {
    top,
    videoBg,
    item,
    breadcrumb,
    tab,
    pop,
    electronicFence,
    deploymentTime,
    workModeSetting,
    InspectionPath
  },
  mounted() {
    var wow = new WOW({
      boxClass: "wow",
      animateClass: "animated",
    });
    wow.init();
    this.getData()
  },
  computed: {
    computedTreeData() {
      return this.filteredTreeData;
    },
    imagesToShow() {
      switch (this.active) {
        case 1:
          return [img];
        case 2:
          return Array(4).fill(img);
        case 3:
          return Array(9).fill(img);
        case 4:
          return Array(16).fill(img);
        default:
          return [];
      }
    }
  },
  watch: {

    keyword(newVal) {
      this.filterTreeData(newVal);
    },
    active(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.show = false;
        setTimeout(() => {
          this.show = true;
        }, 10); // 50毫秒的延迟
      }
    }
  },
  methods: {
    handleClick(popRef) {
      // 使用$refs访问指定的pop组件并调用其getShow方法
      if (this.$refs[popRef]) {
        this.$refs[popRef].getShow();
      }
    },
    closePop(popRef) {
      // 使用$refs访问指定的pop组件并调用其getShow方法
      if (this.$refs[popRef]) {
        this.$refs[popRef].getHide();
      }
    },
    async getData() {
      try {
        const res = await generateTreeData();
        this.treeData = res.data;
        this.filteredTreeData = [...this.treeData];
      } catch (err) {
        console.error(err);
      }
    },
    filterTreeData(keyword) {
      if (!keyword) {
        this.filteredTreeData = [...this.treeData];
        return;
      }
      const filterNodes = (node) => {
        if (node.label.includes(keyword)) return true;
        if (node.children && node.children.length) {
          return node.children.some(filterNodes);
        }
        return false;
      };
      this.filteredTreeData = this.treeData.filter(filterNodes);
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
}

.homeMain {
  position: relative;
  width: calc(100% - 60px);
  height: calc(100% - 160px);
  margin-top: 140px;
  display: flex;
  margin-left: 30px;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;

  .pageInner {
    width: 100%;
    position: relative;
    height: 100%;

    .breadcrumb {
      width: calc(100% - 40px);
      margin-left: 20px;
      position: relative;
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .pageInnerData {
      position: relative;
      width: calc(100% - 40px);
      margin: 10px auto;
      height: calc(100% - 70px);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .pageInnerDataL {
        position: relative;
        width: 21%;
        height: 100%;
        background: rgba(11, 42, 71, 1.00);

        .searchInput {
          width: calc(100% - 20px);
          margin: auto;
          margin-top: 20px;
        }

        .treeBody {
          width: calc(100% - 20px);
          margin: 10px auto;
          position: relative;
          height: calc(100% - 70px);
          overflow-y: scroll;
        }
      }

      .pageInnerDataC {
        position: relative;
        width: calc(58% - 60px);
        height: 100%;

        .centerImg {
          position: relative;
          max-height: 100%;

          img {
            position: relative;
            width: 100%;
            height: 100%;
          }
        }
      }

      .pageInnerDataC {
        display: flex;
        flex-wrap: wrap;

        &.pageInnerDataC1 {
          .centerImg1 {
            flex: 1 1 calc(100% - 20px);
          }
        }

        &.pageInnerDataC2, &.pageInnerDataC3, &.pageInnerDataC4 {
          .centerImg {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              max-width: 100%; // 确保图片不超出容器
              height: 100%;
            }
          }

          &.pageInnerDataC2 {
            .centerImg2 {
              flex: 1 1 calc(50% - 10px);
              width: calc(50% - 10px);
              height: calc(50% - 10px);

              &:nth-child(odd) {
                margin-right: 10px; // 仅对第1张和第3张图片应用右侧的间隔
              }

              &:nth-child(-n+2) {
                margin-bottom: 10px; // 仅对第1张和第2张图片应用底部的间隔
              }
            }
          }

          &.pageInnerDataC3 {
            .centerImg3 {
              flex: 1 1 calc(33.3333% - 10px);
              width: calc(33.3333% - 10px);
              height: calc(33.3333% - 10px);

              &:nth-child(3n + 1), &:nth-child(3n + 2) {
                margin-right: 10px; // 对每行的前两张图片应用右侧的间隔
              }

              &:nth-child(-n+6) {
                margin-bottom: 10px; // 对前两行的图片应用底部的间隔
              }
            }
          }

          &.pageInnerDataC4 {
            .centerImg4 {
              flex: 1 1 calc(25% - 10px);
              width: calc(25% - 10px);
              height: calc(25% - 10px);

              &:nth-child(4n + 1), &:nth-child(4n + 2), &:nth-child(4n + 3) {
                margin-right: 10px; // 对每行的前三张图片应用右侧的间隔
              }

              &:nth-child(-n+12) {
                margin-bottom: 10px; // 对前三行的图片应用底部的间隔
              }
            }
          }
        }
      }

      .pageInnerDataR {
        position: relative;
        width: 21%;
        height: 100%;
        background: rgba(11, 42, 71, 1.00);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;
      }

    }
  }
}

//中间图片布局
.centerImg {
  width: 100%;
}

//操作按钮
.navigations {
  position: relative;
  width: 100%;
  height: 33.33%;

  .navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    height: calc(33.33% - 10px);
    margin-top: 10px;
    margin-bottom: 10px;

    .navigationitem {
      width: 86px;
      height: 100%;
      position: relative;
      background: rgba(34, 112, 165, 1.00);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      border-radius: 10px;
      margin: 5px;
      cursor: pointer;

      img.jt {
        width: 18px;
        height: 31px;
      }

      img.sh {
        width: 27px;
      }
    }
  }
}

.xz45 {
  transform: rotateZ(45deg) !important;
}

.xz90 {
  transform: rotateZ(90deg) !important;
}

.xz45f {
  transform: rotateZ(-45deg) !important;
}

.xz180 {
  transform: rotateZ(135deg) !important;
}

.xz270 {
  transform: rotateZ(270deg) !important;
}

.xz315 {
  transform: rotateZ(315deg) !important;
}

.xz360 {
  transform: rotateZ(360deg) !important;
}

.xz225 {
  transform: rotateZ(225deg) !important;
}

.xz180 {
  transform: rotateZ(180deg) !important;
}

.xz135 {
  transform: rotateZ(135deg) !important;
}

.anniu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 20px;
  width: 100%;
  height: calc(20% - 20px);

  .anniuitem {
    width: calc(50% - 20px);
    height: calc(50% - 10px);
    position: relative;
    border-radius: 10px;
    background: rgba(34, 112, 165, 1.00);
    margin-bottom: 10px;
    font-size: 16px;
    font-family: PingFang SC Bold;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    margin-right: 10px;
    cursor: pointer;
  }

  .anniuitem.active,
  .anniuitem:hover {
    background: linear-gradient(180deg, rgba(68, 156, 201, 1.00) 0%, #0c7588 100%);
  }

  .anniuitem:nth-child(2n) {
    margin-right: 0;
  }
}


.camera {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  width: 100%;
  height: 33.33%;
  position: relative;

  .shexiangtoulist2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: calc(100% - 20px);
    flex-direction: row;
    height: calc(33.33% - 10px);
    position: relative;
    margin-bottom: 10px;

    .item {
      width: calc(50% - 6px);
      margin-bottom: 12px;
      background: rgba(34, 112, 165, 1.00);
      display: flex;
      position: relative;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;

      img {
        width: 30px;
      }
    }
  }

  .shexiangtoulist3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    width: calc(100% - 30px);
    flex-direction: row;
    height: calc(33.33% - 10px);
    margin: auto;
    margin-bottom: 10px;


    .item {
      width: calc(25% - 10px);
      background: rgba(34, 112, 165, 1.00);
      display: flex;
      position: relative;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      border-radius: 20px;
      cursor: pointer;
    }
  }

  .shexiangtoulist4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    width: calc(100% - 30px);
    height: calc(33.33% - 10px);
    position: relative;
    margin: auto;
    margin-bottom: 10px;
    cursor: pointer;

    .item {
      width: calc(33% - 10px);
      position: relative;
      height: 100%;
      background: rgba(34, 112, 165, 1.00);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      border-radius: 20px;
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0.3; /* 从稍微有点透明度的状态开始和结束可以使动画更加平滑 */
  transform: scale(0.99); /* 轻微的缩放效果 */
}
</style>
